<template>
<div>
<!--  <el-button>-->

<!--  </el-button>-->


  <el-form :inline="true" :inref="form" :model="form" label-width="80px">
    <el-col   :span="5" >

      <el-input v-model="querys.eno" placeholder="编号" class="handle-input mr10"></el-input>
    </el-col>
    <el-col :span="8">
      <el-input v-model="querys.month" placeholder="月份" class="handle-input mr10" ></el-input>
    </el-col>
    <el-button
        type="primary"
        icon="el-icon-search"
        class="handle-del mr10"
        @click="getDatas"
    >查找</el-button>
  </el-form>

  <el-table
      :data="tableDatas"

      border
      class="table"
      ref="multipleTable"
      header-cell-class-name="table-header">


  <el-table-column prop="dab"
                   label="1"

                   align="center">


  </el-table-column>
    <el-table-column prop="dat"
                     label="出勤"

                     align="center">

    </el-table-column>
      <el-table-column prop="di"
                       label="病假"

                       align="center">

    </el-table-column>
      <el-table-column prop="dl"
                       label="事假"

                       align="center">

      </el-table-column>
    <el-table-column prop="dml"
                     label="产假"

                     align="center">

    </el-table-column>
    <el-table-column prop="dot"
                     label="加班"

                     align="center">

    </el-table-column>
    <el-table-column prop="dwj"
                     label="工伤"

                     align="center">
      <template #default="scope">
        <el-input v-model="scope.row.dwj" :disabled="!scope.row.disabled"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="eno"
                     label="编号"

                     align="center">
      <template #default="scope">
        <el-input v-model="scope.row.eno" :disabled="!scope.row.disabled"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="injuryrate"
                     label="病假系数"

                     align="center">
      <template #default="scope">
        <el-input v-model="scope.row.injuryrate" :disabled="!scope.row.disabled"></el-input>
      </template>
    </el-table-column>

    <el-table-column prop="month"
                     label="月份"
                     align="center">
      <template #default="scope">
        <el-input v-model="scope.row.month" :disabled="!scope.row.disabled"></el-input>
      </template>
<!--      <input class="edit-cell" v-if="showEdit[$index]"    v-model="row.Name">-->
<!--      <span v-if="!showEdit[$index]">{{row.Name}}</span>-->
    </el-table-column>

    <el-table-column label="操作" width="180" align="center">
      <template #default="scope">
        <el-button
            type="text"
            icon="el-icon-edit"

            @click="handleEdit( scope.row)"
        >编辑</el-button>
        <el-button
            type="text"
            icon="el-icon-delete"
            class="red"
            @click="handleDelete()"
        >删除</el-button>

        <el-button v-if="scope.row.edit"  size="mini" icon="el-icon-refresh"
                   type="text"  @click="handleCancle(scope.row)">取消
        </el-button>
        <el-button v-if="scope.row.edit"  size="mini" icon="el-icon-refresh"
                   type="text" @click="handleSave">保存
        </el-button>
      </template>

    </el-table-column>
  </el-table>
</div>
</template>

<script>
import { fetchData } from "../api/index";
// import qs from 'qs'
// var carName = "porsche";
export default{

  name: "basetalbe",
  data(){
    return{

      querys:{
        operation:"selec",
        month:"",
        eno:""
      },
      tableDatas:[],
      // showEdit: [], //显示编辑框
      // showBtn: [],
      // showBtnOrdinary: true
    };
  },created(){
   this.getDatas()

  },
  methods:{
    getDatas(){

      // console.log(this.querys);
      // console.info(this.querys.operation)
      // console.log(res.data.name);
      // var i=0
      // for (;i<10;i++) {
      //   this.tableDatas[0].no = res.data.no
      //   this.tableDatas[0].name = res.data.name
      // // }
      // console.info(this.tableDatas)

      // this.query
      this.querys.operation="selec"
      fetchData(this.querys).then(res =>{
        console.log(res.data);

        this.tableDatas[0] = res.data


        // this.name = res.data
      })
    }, handleEdit( row){
      // this.idx = index;
      // this.form = row;
      // this.editVisible = true;
      // sessionStorage.setItem('oldPropertValue', row.propertyValue)
      // isEditPropertyShow为ture展示输入框
      // this.$set(this.tableDatas[index], 'isEditPropertyShow', true)
      // this.$message.success('提交成功！');
      //   this.showEdit[index] = true;
      //   this.showBtn[index] = true;

      //   this.$set(this.showEdit,row,true)
      //   this.$set(this.showBtn,row,true)
      row.edit = !row.edit;
      row.disabled = true;
    },
    handleDelete() {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
          .then(() => {
            this.$message.success("删除成功");
            // this.tableData.splice(index, 1);
            this.querys.operation="delet"

            fetchData(this.querys).then(res =>{
              console.log(res.data)
            })
          })
          .catch(() => {});
    },
    handleCancle(row){
      row.edit = !row.edit;
      row.disabled = false;
    },
    handleSave(){
      this.querys.operation="updat"
      fetchData(this.tableDatas).then(res =>{
        console.log(res.data);

        // this.tableDatas[0] = res.data


        // this.name = res.data
      })
    }
  }
}
</script>

<style scoped>

</style>